<template>
    <div class="source  animated bounceInRight">
        <div class="btn-group">
            <router-link to="/source/movie" class="btn btn-default">Movie</router-link>
            <router-link to="/source/software" class="btn btn-default">Software</router-link>
            <router-link to="/source/website" class="btn btn-default">Website</router-link>
        </div>
        <router-view/>
    </div>
</template>

<script>
    import Movie from "./Movie"
    import Software from "./Software"
    import Website from "./Website"
    import Footer from "../../components/Footer"
    import {mapState} from 'vuex'

    export default {
        name: "source",
        components: {
            Movie,
            Software,
            Website,
            Footer
        },
    }
</script>

<style lang="less">
    .source{
        .btn-group{
            margin: 20px 0;
        }
    }
    .app-top {
        padding: 20px 0;
        width: 50%;
        height: 100px;
        margin: 20px auto;
    }

    .movie_download {
        width: 100%;
        overflow: auto;
    }

    .software_type {
        width: 30%;
        text-align: center;
        background-color: skyblue;
        margin: 5px auto;
        padding: 2px;
        border-radius: 20px;
        color: white;
    }

    .source {
        & > .app-top {
            background: url("../../assets/img/appTop1.png");
            background-size: 100% 100%;
        }

        .source-header {
            border-top: 2px solid silver;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .source-content {
            margin: 20px 0;
        }

        .thumbnail {
            img {
                width: 80%;
                height: 150px;
                object-fit: cover;
            }
        }
    }

    .source-intro {
        text-align: center;
    }

    .source-header-title {
        position: relative;
        padding: 0;
        width: 200px;
        height: 48px;
        background: url("../../assets/img/source/diaopai.png");
        background-size: 100% 100%;
        text-align: center;
        line-height: 48px;
        font-size: 28px;
        color: white;
    }

    .wb-info {
        width: 90%;
        height: 100px;
        margin: 5px auto;
        overflow: auto;
        text-align: left;
        text-indent: 30px;
        padding: 10px;
    }

</style>
